<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 响应式的核心函数（数据劫持）
        function defineReactive(obj, key, value) {
            // 对value进行深层次的处理
            observe(value)

            Object.defineProperty(obj, key, {
                get: function reactiveGetter() {
                    console.log("我们可以再这个里边收集依赖项放在dep数组中。。。。");
                    return value;
                },
                set: function reactiveSetter(newVal) {
                    console.log('通知所有的依赖项，重新去拿值，因为我更新了');
                    // 更新数据
                    value = newVal
                }
            })
        }


        // 对数据开始响应式操作
        function observe(obj) {
            // 递归调用
            // 如果obj不是对象，则直接retrun，不需要深层次响应式处理
            if (typeof obj !== 'object' || obj === null) return

            for (let key of Object.keys(obj)) {
                // 遍历对象后，把对象的每一个属性都交给defineReactive进行响应式处理
                defineReactive(obj, key, obj[key])
            }
        }
        const vm = {
            _data: {
                name: 'laowang',
                age: 18,

            }
        }

        // 调用observe函数，把数据给到observe，observe帮我们进行响应式操作
        observe(vm._data)
    </script>
</body>

</html>